<script setup>
import router from "@/router/index.js";
import {reactive} from "vue";

const data = reactive({
  port: 'http://localhost:8888',
  user: JSON.parse(localStorage.getItem('code_user') || "{}")
})

const loginOut = () => {
  localStorage.removeItem('code_user')
  router.push('/')
}

// 这种不安全可以在浏览器中伪造json
if (!data.user?.id){
  router.push('/')
}

const updateUser = () => {
  data.user = JSON.parse(localStorage.getItem('code_user' || '{}'))
}

console.log(data.user)

</script>

<template>
  <div>
    <!--  头部区域-->
    <div style="height: 60px;display: flex;">
      <div style="display: flex;align-items: center;justify-content: center;background-color: #3a456b;width: 240px">
        <span style="font-size: 20px;color: #eee">线上药店管理系统</span>
      </div>
      <div style="flex: 1; display: flex; align-items: center; padding-left: 20px; border-bottom: 1px solid #ddd">
        <span style="margin-right: 5px;cursor: pointer" @click="router.push('/manager/home')">首页</span> / <span style="margin-left: 5px">{{ router.currentRoute.value.meta.name }}</span>
      </div>
      <div style="width: fit-content; padding-right: 20px; display: flex; align-items: center; border-bottom: 1px solid #ddd">
        <el-dropdown>
          <div style="display: flex;align-items: center;">
            <img v-if="data.user?.avatar" style="width: 40px;height: 40px" :src="data.port+data.user.avatar" alt="">
            <img v-else style="width: 40px;height: 40px" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" alt="">
            <span style="margin-left: 4px">{{data.user?.name}}</span>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="router.push('/manager/person')">个人信息</el-dropdown-item>
              <el-dropdown-item @click="router.push('/manager/updatePassword')">修改密码</el-dropdown-item>
              <el-dropdown-item @click="loginOut">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

    <!--    下方区域开始-->
    <div style="display: flex">
      <!--      菜单区域-->
      <div style="width: 240px">
        <el-menu
            router
            :default-openeds="['1','2']"
            :default-active="router.currentRoute.value.path"
            style="min-height: calc(100vh - 60px)"
        >
          <el-menu-item index="/manager/home">
            <el-icon><House/></el-icon>
            <span>首页</span>
          </el-menu-item>
          <el-sub-menu index="1" v-if="data.user.role === 'ADMIN'">
            <template #title>
              <el-icon><User /></el-icon>
              <span>用户管理</span>
            </template>
            <el-menu-item index="/manager/admin">管理员信息</el-menu-item>
            <el-menu-item index="/manager/user">普通用户信息</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon><Monitor /></el-icon>
              <span>药品管理</span>
            </template>
            <el-menu-item index="/manager/drugClassification">药品分类</el-menu-item>
            <el-menu-item index="/manager/drugDetails">药品详情</el-menu-item>
          </el-sub-menu>
          <el-menu-item index="/manager/order">
            <el-icon><Monitor /></el-icon>
            <span>订单明细</span>
          </el-menu-item>
        </el-menu>
      </div>

      <!--    数据渲染区域-->
      <div style="flex: 1;background-color: #f2f4ff;width: 0;padding: 10px">
        <RouterView @updateUser="updateUser" />
      </div>
    </div>
  </div>
</template>

<style>
.el-menu {
  background-color: #3a456b;
  border: none;
}
.el-sub-menu__title {
  background-color: #3a456b;
  color: #ddd;
}
.el-menu-item {
  height: 50px;
  color: #ddd;
}
.el-menu .is-active {
  background-color: #537bee;
  color: #fff;
}
.el-sub-menu__title:hover {
  background-color: #3a456b;
}
.el-menu-item:not(.is-active):hover {
  background-color: #7a9fff;
  color: #333;
}
.el-dropdown {
  cursor: pointer;
}
.el-tooltip__trigger {
  outline: none;
}
.el-menu--inline .el-menu-item {
  padding-left: 48px !important;
}
</style>